<template>
  <view class="ver-layout">
    <view class="standard-list">
      <view class="standard-item" v-for="(item,index) in standardList" :key="index">
        <view class="standard-item-top hor-layout-side-center">
          <view class="standard-item-title">套餐{{ index + 1 }}</view>
          <view class="delete-view" v-if="index!==0" @click="deleteStandard(index)">
            <i class="iconfont delete-icon">&#xe652;</i>
          </view>
        </view>
        <u-form :model="item" ref="uForm" label-width="97px" :label-style="formLabel">
          <u-form-item label="套餐名称">
            <u-input v-model="item.title" placeholder="请输入套餐名称"/>
          </u-form-item>
          <u-form-item label="课时单价">
            <u-input v-model="item.class_period_price" placeholder="请输入课时单价"/>
          </u-form-item>
          <u-form-item label="总课时数">
            <u-input v-model="item.class_period_totalnum" placeholder="请输入总课时数"/>
          </u-form-item>
          <u-form-item label="赠送课时">
            <u-input v-model="item.is_free" placeholder="请输入赠送课时"/>
          </u-form-item>
          <u-form-item label="上课时间">
            <view class="form-select-item hor-layout-center" @click="showStudyTime=true">
              <view class="form-select-text">
                {{ item.studyObj && item.studyObj.label ? item.studyObj.label : '请选择' }}
              </view>
              <u-icon name="arrow-right" color="#000000"></u-icon>
            </view>
            <u-select v-model="showStudyTime" :list="studyTimes" title="选择上课时间"
                      :default-value="item.studyObj&&item.studyObj.value"
                      @confirm="confirmSelectStudyTime($event,index)"></u-select>
          </u-form-item>
        </u-form>
      </view>
      <view class="add-standard-btn" @click="addStandardClick">新增</view>
    </view>
    <!--  下一步  -->
    <view class="next-btn" @click="createCourseClick">
      <view>保存</view>
    </view>
  </view>
</template>

<script>
import {AddCourseApi} from "@/api/courseList.js"
import {courseList} from "@/router.js"

let engine = new AddCourseApi()
export default {
  name: "addChargeStand",
  data() {
    return {
      formLabel: {
        color: "#282828",
        fontSize: '15px',
        textAlign: 'justify',
        textAlignLast: 'justify',
        display: 'inline-block',
        paddingRight: '27px'
      },
      courseObj: {},
      standardList: [{studyObj: {}}],
      showStudyTime: false,
      studyTimes: []
    }
  },
  onLoad(options) {
    this.courseObj = JSON.parse(options.course)
    this.getClassTime()
  },
  methods: {
    getClassTime() {
      engine.getClassTime().then(res => {
        this.studyTimes = res.data.map(item => {
          return {label: `${item.start_time}-${item.end_time}`, value: item.id}
        })
        //解析上个界面获取到的数据
        if (this.courseObj.skus) {
          this.standardList = this.courseObj.skus.map(sku => {
            let studyObj = this.studyTimes.find(st => st.value === sku.time_id)
            if (studyObj) studyObj.value = [studyObj.value]
            return {...sku, studyObj}
          })
        }
      })
    },
    addStandardClick() {
      this.standardList.push({studyObj: {}})
    },
    deleteStandard(index) {
      this.standardList.splice(index, 1)
    },
    confirmSelectStudyTime(e, index) {
      let channelIndex = this.studyTimes.findIndex(item => item.value === e[0].value)
      this.standardList[index].studyObj.value = [channelIndex]
      this.standardList[index].studyObj.label = e[0].label
      this.standardList[index].time_id = e[0].value
    },
    createCourseClick() {
      this.courseObj.skus = this.standardList
      if (this.courseObj.id) {
        this.courseObj.course_id = this.courseObj.id
        engine.updateCourse(this.courseObj).then(res => {
          this.$u.toast(res.message)
          if (res.code === 200) {
            this.$u.pageCallBackDelay(courseList, 'refreshData', '')
            this.$u.routeDelay({type: 'navigateBack', delta: 2})
          }
        })
      } else {
        engine.addCourse(this.courseObj).then(res => {
          this.$u.toast(res.message)
          if (res.code === 200) {
            this.$u.pageCallBackDelay(courseList, 'refreshData', '')
            this.$u.routeDelay({type: 'navigateBack', delta: 2})
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.standard-list {
  margin-bottom: 60px;
}

.standard-item {
  padding: 0px 12px;
  margin: 0px 12px;
  margin-top: 20px;
  width: calc(100% - 24px);
  border: 1px solid #E5E5E5;
  box-shadow: 1px 1px 1px #e3e3e3;
  border-radius: 5px;
}

.standard-item-top {
  height: 40px;
  line-height: 40px;
  width: 100%;
  border-bottom: 1px solid #E4E4E4;
}

.standard-item-title {
  height: 40px;
  line-height: 40px;
  /* */
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.delete-view {
  width: 50px;
  text-align: center;
}

.delete-icon {
  font-size: 18px;
  color: #FF2C2C;
}

.add-standard-btn {
  margin: 20px 12px;
  width: 60px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  background: #42B4AB;
  border-radius: 3px;
  /**/
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}

.next-btn {
  z-index: 1000;
  position: fixed;
  bottom: 0px;
  height: 50px;
  width: 100%;
  background: white;
}

.next-btn > * {
  margin: auto;
  width: calc(100% - 26 * 2px);
  background: #42B4AB;
  text-align: center;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  /* 文本样式 */
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
}

.form-select-item {
  width: 100%;
}

.form-select-text {
  flex: 1;
  width: 0;
  margin-right: 3px;
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
</style>
